<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container padding_b_0">
			<div class="dflex_wrap">
				<div class="dflex_vertical_c margin_r_40 margin_b_20">
					<div class="search_name">标题：</div>
					<el-input v-model="req.title" placeholder="请输入" class="search_input" @change="search" clearable></el-input>
				</div>
				<div class="dflex_vertical_c margin_r_40 margin_b_20" v-if="advancedSearch">
					<div class="search_name">反馈时间：</div>
					<el-date-picker
						v-model="searchTime"
						type="daterange"
						align="right"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						format="yyyy-MM-dd"
						:picker-options="pickerTimeOptions"
						class="search_start_end_time"
						@change="search"
					></el-date-picker>
				</div>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_b_20 margin_r_40" @click="search">搜索</el-button>
				<div class="search_advanced margin_b_20" @click="advancedSearch = !advancedSearch" v-if="!advancedSearch">高级筛选</div>
				<div class="search_common margin_b_20" @click="advancedSearch = !advancedSearch" v-if="advancedSearch">常用筛选</div>
			</div>
		</div>
		<div class="container last_container use-table">
			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row @sort-change="sortable">
				<el-table-column property="title" label="标题" align="center"></el-table-column>
				<el-table-column property="type_name" label="反馈类型" align="center"></el-table-column>
				<el-table-column property="content" label="反馈内容" align="center"></el-table-column>
				<el-table-column label="反馈截图" align="center" width="350">
					<template slot-scope="scope">
						<div class="dflex owao">
							<div class="margin_r_10" v-for="(item, i) in scope.row.imgs" :key="i">
								<el-image
									v-if="item.type && item.type.indexOf('image/') !== -1"
									style="width: 80px; height: 80px;border-radius: 10px;overflow: hidden;"
									:preview-src-list="scope.row.previewImgs"
									:src="item.url"
									fit="cover"
								></el-image>
								<video
									v-if="item.type && item.type.indexOf('video/') !== -1"
									:src="item.url"
									class="crpr video"
									objectFit="cover"
									style="width: 80px; height: 80px;border-radius: 10px;overflow: hidden;"
									:show-center-play-btn="false"
									:controls="false"
									@click="playVideo(item.url)"
								>
									<div class="iconfont iconbofang crpr"></div>
								</video>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column property="contact_way" label="联系方式" align="center"></el-table-column>
				<el-table-column property="create_time" sortable="custom" label="反馈时间" align="center"></el-table-column>
				<div slot="empty"><el-empty description=" "></el-empty></div>
			</el-table>
			<el-pagination
				background
				:current-page="req.page"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableTotal"
				@size-change="sizeChange"
				@current-change="currentChange"
			></el-pagination>
		</div>
		<el-dialog
			class="video_dialog"
			width="70%"
			:visible.sync="videoDialog"
			:append-to-body="true"
			@open="dialogOpen"
			@opened="dialogOpened"
			@closed="dialogClosed"
			v-dialogDrag
		>
			<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
		</el-dialog>
	</div>
</template>

<script>
const __name = 'wmzmall-app-feedback';
import '../../common/video.css';
export default {
	data() {
		return {
			advancedSearch: false,
			searchTime: [],
			req: {
				page: 1,
				rows: 10,
				orderby: 'create_time desc',
				title: '',
				begin_time: '',
				end_time: ''
			},
			tblHeight: 0,
			tableLoading: false,
			tableDatas: [],
			tableTotal: 0,
			pickerTimeOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
				shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}
				]
			},
			videoDialog: false,
			playerOptions: {
				playbackRates: [0.5, 1.0, 2.0, 3.0], //可选择的播放速度
				autoplay: false, //如果true,浏览器准备好时开始播放。
				muted: false, // 默认情况下将会消除任何音频。
				loop: false, // 视频一结束就重新开始。
				preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: 'zh-CN',
				aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				sources: [
					{
						type: '',
						src: '' //url地址
					}
				],
				poster: '', //你的封面地址
				notSupportedMessage: '此视频暂无法播放', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
				controlBar: {
					timeDivider: true, //当前时间和持续时间的分隔符
					durationDisplay: true, //显示持续时间
					remainingTimeDisplay: false, //是否显示剩余时间功能
					fullscreenToggle: true //全屏按钮
				}
			},
			searchBtnLoading: false
		};
	},
	methods: {
		async loadData(callback) {
			this.tableLoading = true;

			this.req.begin_time = '';
			this.req.end_time = '';

			if (this.searchTime && this.searchTime.length > 0) {
				this.req.begin_time = this.searchTime[0].getTime();
				this.req.end_time = this.searchTime[1].getTime() + (60 * 60 * 24 - 1) * 1000;
			}

			await this.$db[__name]
				.whereif(this.req.title, { title: new RegExp(this.$api.filterRegexpKey(this.req.title), 'i') })
				.whereif(this.searchTime && this.searchTime.length > 0, { create_time: this.$db.$cmd.gte(this.req.begin_time).and(this.$db.$cmd.lte(this.req.end_time)) })
				.totable(this.req)
				.then(res => {
					if (res.code == 200) {
						res.datas.rows.forEach((row, idx) => {
							row.create_time = new Date(row.create_time).format();
							row.previewImgs = [];
							row.imgs.forEach(x => {
								if (x.type && x.type.indexOf('image/') !== -1) {
									row.previewImgs.push(x.url);
								}
							});
						});

						this.tableDatas = res.datas.rows;
						this.tableTotal = res.datas.total;

						if (typeof callback === 'function') {
							callback();
						}
					}
					this.searchBtnLoading = false;
					this.tableLoading = false;
				});
		},
		search() {
			this.req.page = 1;
			this.$api.storagePaginationPage(this.req.page, this.$route.path);
			this.searchBtnLoading = true;

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});

			uni.setStorage({
				key: '__search' + this.$route.path,
				data: this.req
			});
		},
		sortable(column) {
			if (column.order) {
				column.order = column.order.replace('ending', '');
			}
			this.req.orderby = column.prop + ' ' + (column.order || 'desc');

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		},
		playVideo(url) {
			this.playerOptions.sources[0].src = url;
			this.videoDialog = true;
		},
		dialogOpen() {
			if (this.$refs.videoPlayer) {
				this.$refs.videoPlayer.$el.children[0].children[0].currentTime = 0;
			}
		},
		dialogOpened() {
			this.$refs.videoPlayer.player.play();
		},
		dialogClosed() {
			this.$refs.videoPlayer.player.pause();
		},
		sizeChange(size) {
			this.$api.storagePaginationRows(size, this.$route.path);
			this.req.page = 1;
			this.$api.storagePaginationPage(this.req.page, this.$route.path);
			this.req.rows = size;

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		},
		currentChange(current) {
			this.$api.storagePaginationPage(current, this.$route.path);
			this.req.page = current;

			this.loadData(() => {
				this.$refs.etbl.bodyWrapper.scrollTop = 0;
			});
		}
	},
	created() {
		let __search = uni.getStorageSync('__search' + this.$route.path);
		if (__search) {
			this.req = __search;
			if (this.req.begin_time && this.req.end_time) {
				this.searchTime.push(new Date(this.req.begin_time), new Date(this.req.end_time));
				this.advancedSearch = true;
			}
		}

		this.req.page = uni.getStorageSync('__paginationPage' + this.$route.path) || 1;
		this.req.rows = uni.getStorageSync('__paginationRows' + this.$route.path) || 10;

		this.loadData(() => {
			this.$nextTick(() => {
				this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path);
			});
		});
	},
	mounted() {
		this.$nextTick(() => {
			this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path);
		});
	},
	updated() {
		if (!this.tblHeight) {
			this.tblHeight = this.$refs.tbl.tblHeight;
		}
	}
};
</script>

<style>
.video >>> .uni-video-slots {
	display: flex;
	align-items: center;
	justify-content: center;
}

.video:hover .iconbofang {
	transform: scale(1.1);
}

.iconbofang {
	font-size: 32px;
	width: 32px;
	height: 32px;
	line-height: 32px;
	background-color: rgba(0, 0, 0, 0.9);
	border-radius: 50%;
	color: #bbb;
	transition: transform 0.2s;
}

.video_dialog >>> .el-dialog {
	border-radius: 10px;
	overflow: hidden;
}

.video_dialog >>> .el-dialog__header {
	padding: 16px;
}

.video_dialog >>> .el-dialog__headerbtn {
	top: 12px;
	right: 16px;
}

.video_dialog >>> .el-dialog__headerbtn {
	top: 10px;
	right: 16px;
}

.video_dialog >>> .el-dialog__body {
	padding: 0;
}
</style>
